<template>
    <div class="menu-search-box">
        <el-input :placeholder="placeholder" @keyup.enter="search" v-model="keywords" suffix-icon="el-icon-search" ></el-input>
        <el-select v-model="types">
            <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <div class="control">
            <slot name="other"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'menuSearchBox',
    props: {
        placeholder: {
            type: String,
            default: ''
        },
        departmentList: {
            type: Array,
            default () {
                return []
            }
        },
        stateList: {
            type: Array,
            default () {
                return []
            }
        }
    },
    data () {
        return {
            sexList: [
                {
                    value: 1,
                    label: '男'
                },
                {
                    value: 0,
                    label: '女'
                }
            ],
            state: '',
            sex: 1,
            department: '',
            keywords: '',
            types: ''
        }
    },
    methods: {
        search () {
            this.$emit('search', {
                state: this.state,
                sex: this.sex,
                department: this.department,
                keywords: this.keywords
            })
        },
        refresh () {
            this.state = ''
            this.sex = ''
            this.department = ''
        }
    }
}
</script>
<style lang="less">
.menu-search-box{
    padding: 20px 15px;
    .el-input{
        width: 20%;
        margin-right: 10px;
    }
    .el-select{
        width: 10%;
        margin-right: 10px;
        .el-input {
            width: 100%;
        }
    }
    .control {
        display: inline-block;
        float: right;
    }
}
</style>
